DIV в таблице height:100%; overflow:auto;

Evclid · October 1, 2008

Привет,

Помогите новичку, как говориться (:

Это прототип чата... Страничка ведет себя как надо в IE и Opera, но overflow: auto никак не хочет отрабатывать в FF.

Когда окно уменьшается у DIVа (id="chat") должен появиться scroll...

Только стал разбираться с html и на тебе, сразу вляпался в каие-то проблемы. Даже обидно. ):

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	Untitled Page
</title></head>
<body>
  <table width='80%' border='0' style="height: 100%;">
   <tr>
    <td colspan='2' valign="top" style="height: 100%;">
     <div id="chat" style="width: 100px; height: 100%; overflow: scroll; background: #dddddd";>
      <span style='color:#00DD45;'>20:23</span> jhgjhj<br>
      <span style='color:#00DD45;'>20:23</span> ;;;;;;;<br>
      <span style='color:#00DD45;'>23:52</span> xcv<br>
      <span style='color:#00DD45;'>23:54</span> ggggg<br>
      <span style='color:#00DD45;'>23:55</span> ggff<br>
      <span style='color:#00DD45;'>23:55</span> aaa<br>
      <span style='color:#00DD45;'>23:56</span> bbb<br>
      <span style='color:#00DD45;'>23:56</span> cccc<br>
      <span style='color:#00DD45;'>23:56</span> ddd<br>
      <span style='color:#00DD45;'>23:56</span> tyututy<br>
      <span style='color:#00DD45;'>23:56</span> xxxx<br>
      <span style='color:#00DD45;'>23:56</span> yyyy<br>
      <span style='color:#00DD45;'>23:57</span> zzz<br>
      <span style='color:#00DD45;'>12:46</span> jjj<br>
     </div>
    </td>
   </tr>
   <tr>
    <td style="width: 100%"><input name="TextBox1" type="text" id="TextBox1" style="width:100%;" /></td>
    <td style="width: 200px"><input type="submit" name="Button1" value="Send" id="Button1" style="width:100%;" /></td>
   </tr>
  </table>
</body>
</html>

rus · October 1, 2008

Страничка ведет себя как надо в IE и Opera, но overflow: auto никак не хочет отрабатывать в FF.
Когда окно уменьшается у DIVа (id="chat") должен появиться scroll...

Тогда задайте явный overflow, по оси x или y overflow-x: 100%;

q--b · October 1, 2008

работайте только с внешними css ,а так же уделяйте внимание тому - какую схему DTD (определение типа документа) используете,а если не знаете или не уверены какую использовать - лучше опустите вообще этот момент тогда браузер переключит драйвера и сам определит как обработать полученный код ...

rus · October 1, 2008

тогда браузер переключит драйвера и сам определит как обработать полученный код ...

Не всегда нужно давать браузеру решать как обрабатывать твой код (а лучше вообще этого не делать), т.к. разные браузеры отображают результат по разному, поэтому лучше стараться задавать его явным для всех браузеров.

Evclid · October 2, 2008

Тогда задайте явный overflow, по оси x или y overflow-x: 100%;

К сожелению это не работает ):

Searcher · October 2, 2008

div в table вставлять - ошибка. Блочный элемент в таблице - нелогично. Верстка таблицами уже моветон (см. здесь). В данной ситуации даже проще будет блоками. Советую сверстать заново все на div`ах.

rus · October 2, 2008

div в table вставлять - ошибка. Блочный элемент в таблице - нелогично. Верстка таблицами уже моветон (см. здесь). В данной ситуации даже проще будет блоками. Советую сверстать заново все на div`ах.

С чего это вдруг див нельзя в таблицу вставлять?

rus · October 2, 2008

А вам обязательно 100% высоты у дива? А то мона вот так сделать:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<table width='80%' border='0' style="height: 100%;">
  <tr>
    <td colspan='2' valign="top" style="height: 100%;">
<div id="chat" style="width: 100px; height: 800px; overflow-y:scroll; background: #dddddd";> 
<span style='color:#00DD45;'>20:23</span> jhgjhj<br>
        <span style='color:#00DD45;'>20:23</span> ;;;;;;;<br>
        <span style='color:#00DD45;'>23:52</span> xcv<br>
        <span style='color:#00DD45;'>23:54</span> ggggg<br>
        <span style='color:#00DD45;'>23:55</span> ggff<br>
        <span style='color:#00DD45;'>23:55</span> aaa<br>
        <span style='color:#00DD45;'>23:56</span> bbb<br>
        <span style='color:#00DD45;'>23:56</span> cccc<br>
        <span style='color:#00DD45;'>23:56</span> ddd<br>
        <span style='color:#00DD45;'>23:56</span> tyututy<br>
        <span style='color:#00DD45;'>23:56</span> xxxx<br>
        <span style='color:#00DD45;'>23:56</span> yyyy<br>
        <span style='color:#00DD45;'>23:57</span> zzz<br>
        <span style='color:#00DD45;'>12:46</span> jjj<br>
        <span style='color:#00DD45;'>20:23</span> ;;;;;;;<br>
        <span style='color:#00DD45;'>23:52</span> xcv<br>
        <span style='color:#00DD45;'>23:54</span> ggggg<br>
        <span style='color:#00DD45;'>23:55</span> ggff<br>
        <span style='color:#00DD45;'>23:55</span> aaa<br>
        <span style='color:#00DD45;'>23:56</span> bbb<br>
        <span style='color:#00DD45;'>23:56</span> cccc<br>
        <span style='color:#00DD45;'>23:56</span> ddd<br>
        <span style='color:#00DD45;'>23:56</span> tyututy<br>
        <span style='color:#00DD45;'>23:56</span> xxxx<br>
        <span style='color:#00DD45;'>23:56</span> yyyy<br>
        <span style='color:#00DD45;'>23:57</span> zzz<br>
        <span style='color:#00DD45;'>12:46</span> jjj<br>
        <span style='color:#00DD45;'>20:23</span> ;;;;;;;<br>
        <span style='color:#00DD45;'>23:52</span> xcv<br>
        <span style='color:#00DD45;'>23:54</span> ggggg<br>
        <span style='color:#00DD45;'>23:55</span> ggff<br>
        <span style='color:#00DD45;'>23:55</span> aaa<br>
        <span style='color:#00DD45;'>23:56</span> bbb<br>
        <span style='color:#00DD45;'>23:56</span> cccc<br>
        <span style='color:#00DD45;'>23:56</span> ddd<br>
        <span style='color:#00DD45;'>23:56</span> tyututy<br>
        <span style='color:#00DD45;'>23:56</span> xxxx<br>
        <span style='color:#00DD45;'>23:56</span> yyyy<br>
        <span style='color:#00DD45;'>23:57</span> zzz<br>
        <span style='color:#00DD45;'>12:46</span> jjj<br>
        <span style='color:#00DD45;'>20:23</span> ;;;;;;;<br>
        <span style='color:#00DD45;'>23:52</span> xcv<br>
        <span style='color:#00DD45;'>23:54</span> ggggg<br>
        <span style='color:#00DD45;'>23:55</span> ggff<br>
        <span style='color:#00DD45;'>23:55</span> aaa<br>
        <span style='color:#00DD45;'>23:56</span> bbb<br>
        <span style='color:#00DD45;'>23:56</span> cccc<br>
        <span style='color:#00DD45;'>23:56</span> ddd<br>
        <span style='color:#00DD45;'>23:56</span> tyututy<br>
        <span style='color:#00DD45;'>23:56</span> xxxx<br>
        <span style='color:#00DD45;'>23:56</span> yyyy<br>
        <span style='color:#00DD45;'>23:57</span> zzz<br>
        <span style='color:#00DD45;'>12:46</span> jjj<br>
        <span style='color:#00DD45;'>20:23</span> ;;;;;;;<br>
        <span style='color:#00DD45;'>23:52</span> xcv<br>
        <span style='color:#00DD45;'>23:54</span> ggggg<br>
        <span style='color:#00DD45;'>23:55</span> ggff<br>
        <span style='color:#00DD45;'>23:55</span> aaa<br>
        <span style='color:#00DD45;'>23:56</span> bbb<br>
        <span style='color:#00DD45;'>23:56</span> cccc<br>
        <span style='color:#00DD45;'>23:56</span> ddd<br>
        <span style='color:#00DD45;'>23:56</span> tyututy<br>
        <span style='color:#00DD45;'>23:56</span> xxxx<br>
        <span style='color:#00DD45;'>23:56</span> yyyy<br>
        <span style='color:#00DD45;'>23:57</span> zzz<br>
        <span style='color:#00DD45;'>12:46</span> jjj<br>
        <span style='color:#00DD45;'>20:23</span> ;;;;;;;<br>
        <span style='color:#00DD45;'>23:52</span> xcv<br>
        <span style='color:#00DD45;'>23:54</span> ggggg<br>
        <span style='color:#00DD45;'>23:55</span> ggff<br>
        <span style='color:#00DD45;'>23:55</span> aaa<br>
        <span style='color:#00DD45;'>23:56</span> bbb<br>
        <span style='color:#00DD45;'>23:56</span> cccc<br>
        <span style='color:#00DD45;'>23:56</span> ddd<br>
        <span style='color:#00DD45;'>23:56</span> tyututy<br>
        <span style='color:#00DD45;'>23:56</span> xxxx<br>
        <span style='color:#00DD45;'>23:56</span> yyyy<br>
        <span style='color:#00DD45;'>23:57</span> zzz<br>
        <span style='color:#00DD45;'>12:46</span> jjj<br>
      </div></td>
  </tr>
  <tr>
    <td style="width: 100%"><input name="TextBox1" type="text" id="TextBox1" style="width:100%;" /></td>
    <td style="width: 200px"><input type="submit" name="Button1" value="Send" id="Button1" style="width:100%;" /></td>
  </tr>
</table>
</body>
</html>

Скролл появится только если текста будет много, а его в чате я думаю будет ой как много!

Edited October 2, 2008 by rus

Argus · October 2, 2008

1. Лучше не overflow не scroll задавать, а auto.

2. Не задавайте для #chat height:100%. Лучше скриптом просчитывайте и задавайте в px. Иначе он у вас и будет на 100% тянуться по контенту.

3. Что за странная религия, что в table нельзя div вставлять? Хотя действительно вам бы лучше div-ную верстку подучить и дивами сделать. Но вряд ли вы согласитесь на такие трудозатраты.

4. По последней строке таблицы. Пошутили? Одному на 100%, а второму на 200px. Ну и получится 100%+200px. А в реале кнопка давится предыдущей ячейкой, ибо у неё привилегий больше. Дайте лучше кнопке самой 200px, никакой ширины на ячейку кнопки, а на ячейку с полев ввода уже можно 100%.

Searcher · October 2, 2008

3. Что за странная религия, что в table нельзя div вставлять? Хотя действительно вам бы лучше div-ную верстку подучить и дивами сделать. Но вряд ли вы согласитесь на такие трудозатраты.

По поводу div в table я может и слишком категоричен, но на собственной практике убедился, что с такой конструкцией часто возникают разные глюки. И с точки зрения логики неверно блочный элемент в таблицу вкладывать. Об этом Влад еще писал. Язык разметки - это логический язык, где каждому объекту свое предназначение, и новая версия html еще больше структурирована. footer будет в footer, header в header и т.п. Так зачем создавать громоздкий код, который трудно читать. Можно и тэгу DIV придать свойства P, но почему этого никто не делает? Правильно, параграф - это параграф, а блок - это блок. Так и здесь. Изначально не верная верстка. Таблицы не предусматривают внутренней прокрутки. Так зачем их использовать для этих целей? Нужна правильная постановка задачи: что должна делать эта страница и какой элемент на ней какими функциями должен заниматься. От этого и "танцевать".

В настоящее время лучше начинать заниматься версткой с дивов. С таблиц тяжело будет переучиваться. Идеология совсем другая. И не нужно тут огромных затрат времени, достаточно Маржевича почитать. Начать можно отсюда.

Evclid · October 2, 2008

Мне больше нравится думать что DIVы в таблицах имеют место быть.

Конечно я могу переписать все на DIVы, но хочется найти решение проблемы а не уйти от нее..

Надеюсь Вы понимаете (:

2Argus

Спасибо за советы

1,4 Вы правы, я просто не стал париться над этим т.к. это не создает проблем. Может пока...

3. Поддерживаю

2. Похоже действительно придётся попробовать такой вариант, раз других нет.

PS: Жаль что один стандарт все по своему интерпритируют... Выходит учится html - это постоянный поиск каких-то уловок.

Searcher · October 2, 2008

Дело в том, что FF работает строго по спецификациям и 100% высоты у div отсчитывается не по размерам ячейки таблицы, в которую он вложен. Это, собственно, и есть одно из проявлений неверности вложения div в table. Помоему в такой ситуации устанавливается размер по содержимому. Я не уверен, что есть кроссбраузерный способ подгонки размера div к ячейке таблицы без использования JavaScript. Если Вам просто срочно нужен чат, то есть смысл использовать готовые скрипты. А если Вы сами хотите написать, то перейти на дивы это не уход от проблемы, а исправление ошибки. Возникла аналогия Одеть штаны через голову - проблема. Но решением её является одеть штаны через ноги, а не разрезать их, натянуть через голову и потом на себе сшивать

В строке

<div id="chat" style="width: 100px; height: 100%; overflow: scroll; background: #dddddd";>

у Вас ошибка. Обратите внимание на последнюю кавычку. FF считает ошибкой нехватку ; после последнего свойства. Поменяйте местами " и ;

Edited October 2, 2008 by Searcher

Kiddo · October 2, 2008

oveflow-x,y не кроссбраузерно.

По поводу height:100% читайте - Особенности height

rus · October 2, 2008

oveflow-x,y не кроссбраузерно.
По поводу height:100% читайте - Особенности height

Вот еще одна разновидность спама на этом форуме, так активно рекламирующая свой ресурс

Для интереса: а ты пробовал на своем сайте уменьшить окно браузера?

Что происходит с этими словами под хедером:

Правила работы за компьютером и комплекс упражнений для профилактики заболеваний

Evclid · October 2, 2008

Дело в том, что FF работает строго по спецификациям и 100% высоты у div отсчитывается не по размерам ячейки таблицы, в которую он вложен. Это, собственно, и есть одно из проявлений неверности вложения div в table. Помоему в такой ситуации устанавливается размер по содержимому. Я не уверен, что есть кроссбраузерный способ подгонки размера div к ячейке таблицы без использования JavaScript. Если Вам просто срочно нужен чат, то есть смысл использовать готовые скрипты. А если Вы сами хотите написать, то перейти на дивы это не уход от проблемы, а исправление ошибки. Возникла аналогия Одеть штаны через голову - проблема. Но решением её является одеть штаны через ноги, а не разрезать их, натянуть через голову и потом на себе сшивать
В строке
<div id="chat" style="width: 100px; height: 100%; overflow: scroll; background: #dddddd";>
у Вас ошибка. Обратите внимание на последнюю кавычку. FF считает ошибкой нехватку ; после последнего свойства. Поменяйте местами " и ;

Спасибо. Вы мне очень помогли.

Я думаю что попробую и скриптом обойтись и затем, пожалуй, поиграю в DIVный вариант. Сравню, погляжу что да как.

Чат мне нужен не срочно - это просто мои попытки попрактиковаться в html и, что интересней, ASP.NET.

Со штанами Вы, конечно, переборщили, а ошибочка моя - это результаты полуночной невнимательности (:

Searcher · October 3, 2008

Рад, что смог хоть как-то помочь. Спасибо, что Вы адекватно восприняли мои настойчивые советы. А то на этом форуме часто какой-то агрессивный народ бывает.

Все новые версии браузеров довольно точно придерживаются стандартов. А старые версии - жесть. Сейчас остались только некоторые особенности. Особенность с интерпретацией width и height в стилях, например. Об этом можно прочесть здесь. С JavaScript еще много различий осталось. Вобщем, побольше читайте и используйте поиск в google. Решения большинства проблем там легко найти.

Sign In

DIV в таблице height:100%; overflow:auto;

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information